<template>
  <div>
    <div class="left">
      <!--项目-->
      <div class="search_list">
        <span class="search_text">项目名称：</span>
        <el-select size="small" v-model="project" value-key="id" placeholder="请选择">
          <el-option v-for="item in projectList" :key="item.id" :label="item.name"
                    :value="item"></el-option>
        </el-select>
      </div>
      <!--工单状态-->
      <div class="search_list">
        <span class="search_text">工单状态：</span>
        <el-select size="small" v-model="workOrderStatus" value-key="id" placeholder="请选择">
          <el-option v-for="item in workOrderStatusList" :key="item.id" :label="item.name"
                    :value="item"></el-option>
        </el-select>
      </div>
    </div>
    <div class="center">
      <!--创建人-->
      <div class="search_list create_user">
        <span class="search_text" style="display:flex;justify-content: flex-end;">创建人：</span>
        <el-select size="small" v-model="founder" filterable value-key="id" placeholder="请选择">
          <el-option v-for="item in founderList" :key="item.id" :label="item.name"
                    :value="item"></el-option>
        </el-select>
      </div>
      <!--工单类型-->
      <div class="search_list">
        <span class="search_text">工单类型：</span>
        <el-select size="small" v-model="workOrderType" value-key="resourceValue" placeholder="请选择">
          <el-option v-for="item in workOrderTypeList" :key="item.resourceValue" :label="item.resourceItem"
                    :value="item"></el-option>
        </el-select>
      </div>
    </div>
    <div class="right">
      <!--当前处理人-->
      <div class="search_list current_deal_user">
        <span class="search_text" style="min-width: 84px;">当前处理人：</span>
        <el-select size="small" v-model="handler" value-key="id" placeholder="请选择">
          <el-option v-for="item in handlerList" :key="item.id" :label="item.name"
                    :value="item"></el-option>
        </el-select>
      </div>
      <!--创建时间-->
      <div class="search_list create_time">
        <span class="search_text" style="min-width: 83px;display:flex;justify-content: flex-end;">创建时间：</span>
        <el-date-picker
          v-model="creationTime"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //项目
        project: '',
        //创建人
        founder: '',
        //当前处理人
        handler: '',
        //工单状态
        workOrderStatus: '',
        //工单类型
        workOrderType: '',
        //创建时间
        creationTime: '',
      }
    },
    props: {
      projectList: Array,
      founderList: Array,
      handlerList: Array,
      workOrderStatusList: Array,
      workOrderTypeList: Array,
    },
    watch: {
      project() {
        this.$emit('project', this.project);
      },
      founder() {
        this.$emit('founder', this.founder);
      },
      handler() {
        this.$emit('handler', this.handler);
      },
      workOrderStatus() {
        this.$emit('workOrderStatus', this.workOrderStatus);
      },
      workOrderType() {
        this.$emit('workOrderType', this.workOrderType);
      },
      creationTime() {
        this.$emit('creationTime', this.creationTime);
      },
    },
    methods: {
      resetFun() {
        this.project = '';
        this.founder = '';
        this.handler = '';
        this.workOrderStatus = '';
        this.workOrderType = '';
        this.creationTime = '';
      }
    }
  }
</script>

<style lang="less" scoped>
  .left,.center,.right{
    width:100%;
  }
  .left,.center{
    margin-right:37px;
  }
  .center{
    .create_user{
      margin-left:0px !important;
    }
  }
  .right{
    .create_time{
      display: flex;
      justify-content: flex-end;
      .el-input__inner{
        height: 32px;
        border-radius: 2px;
        border: 1px solid #DDDFE6;
      }
    }
  }
  .search_list {
    width:100%;
    margin: 5px 15px 5px 0;
    display: inline-flex;
    align-items: center;
    font-family: PingFangSC-Regular, PingFang SC;
    margin-right:28px;

    .search_text {
      font-size: 14px;
      font-weight: 400;
      font-family: PingFangSC-Regular, PingFang SC;
      color: rgba(0, 0, 0, 0.9);
      min-width:70px;
    }

    /deep/.el-date-editor{
      width:100%;
      max-width:83.5%;
      .el-range-input{
        width:46%;
      }
    }

    /deep/.el-select{
      width:100%;
      .el-input{
        .el-input__inner{
          border-radius: 2px;
          border: 1px solid #DDDFE6;
        }
      }
    }
  }
</style>
